window.onload=function(){
		$(".nav li").hover(function(){
			$(this).find("ul").show();
		},function(){
			$(this).find("ul").hide();
		});
		
		
		$(".size li").click(function(){
			$(this).find("ul").stop().slideDown();
			$(".size li ul li").click(function(){
				$(".size li").html($(this).html());
			});
		});
//		$(".size li ul li").click(function(){
//			$(".size li").html($(this).html());
//	});
	
	$.ajax({
  	type:"get",
  	url:"index.php",
  	success:function(res){
//		html="";
  		var arr=JSON.parse(res);
//			var index=$(".collec li").index();
//			console.log(arr);
  		$(".collec li").click(function(){
			var index=$(this).index();
//			html=`
//					<div id="small"><!--小图区-->
//						<img src="images/${arr[index].url}"/>
//						<div id="mask"></div><!--遮罩层-->
//					</div>
//					<div id="big"><!--大图区-->
//						<img src="images/${arr[index].url}" alt="" id="bigImg" width="100%"/>
//					</div>
//			`
//			$("#box").html(html);
//			console.log(arr[index].url);
			$("#small img").attr("src",`images/${arr[index].url}`);
			$("#big img").attr("src",`images/${arr[index].url}`);
  		})
  		
  	}
  });
	
//	放大镜
$id("small").onmouseover=function(){
			$id("mask").style.display="block";
			$id("big").style.display="block";
		}
		$id("small").onmousemove=function(e){
			var e=e||event;
			//获取鼠标坐标
			var x=e.clientX;
			var y=e.clientY;
			//获取box偏移量
			var w=$id("box").offsetLeft;
			var h=$id("box").offsetTop;
			//鼠标mask位置
			var l=x-w-($id("mask").offsetWidth/2);
			var t=y-h-($id("mask").offsetHeight/2);
			//mask移动界限
			var left=$id("box").offsetWidth-$id("mask").offsetWidth;
			var top=$id("box").offsetHeight-$id("mask").offsetHeight;
			if(l<=0){
				l=0;
			}else if(l>=left){
				l=left;
			}
			if(t<=0){
				t=0;
			}else if(t>=top){
				t=top;
			}
			//mask位置
			$id("mask").style.left=l+"px";
			$id("mask").style.top=t+"px";
			//小图、大图比例
			//方法一
			var lBig=l*($id("bigImg").offsetWidth-$id("big").offsetWidth)/left;
			var tBig=t*($id("bigImg").offsetHeight-$id("big").offsetHeight)/top;
			$id("bigImg").style.left =-lBig+"px";
			$id("bigImg").style.top =-tBig+"px";
	}
		//鼠标离开后mask、大图消失
	$id("small").onmouseout=function(){
		$id("mask").style.display="none";
		$id("big").style.display="none";
	}
/******************商品购买********************/
	var val=$("input").val();
	var html=$(".sum").html();
	$(".add").click(function(){
		var pricestr=$(".price").html();
		var price=pricestr.split("$")[1];
		console.log(price);
		val++;
		$("input").val(val);
		console.log($("input").val());
		var price1=price*val;
		$(".sum").html(`$${price1}`);
		console.log($(".sum").html());
	})
		$(".sub").click(function(){
		var pricestrl=$(".price").html();
		var pricel=pricestrl.split("$")[1];
		console.log(pricel);
		val--;
		if(val<1){
			val=1;
		}
		$("input").val(val);
//		console.log($("input").val());
		var price2=pricel*val;
		$(".sum").html(`$${price2}`);
		console.log($(".sum").html());	
	});
	//判断用户是否登录
	var uname = localStorage.getItem("uname");
	if(uname){
		$(".login").html(uname);
	}
	
	
	
	
};
  